<template>
  <div class="app-container">
    <!-- 搜索部分-->
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="100px">

      <el-form-item label="姓名" prop="staffName">
        <el-input
          v-model="queryParams.staffName"
          placeholder="请输入姓名"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="原因" prop="reason">
        <el-input
          v-model="queryParams.reason"
          placeholder="请输入原因"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="申请日期" prop="initiateTime">
        <el-date-picker clearable
                        v-model="queryParams.initiateTime"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="请选择申请日期">
        </el-date-picker>
      </el-form-item>
      <!--      <el-form-item label="天数" prop="days">-->
      <!--        <el-input-->
      <!--          v-model="queryParams.days"-->
      <!--          placeholder="请输入天数"-->
      <!--          clearable-->
      <!--          @keyup.enter.native="handleQuery"-->
      <!--        />-->
      <!--      </el-form-item>-->
      <el-form-item label="开始时间" prop="startTime">
        <el-date-picker clearable
                        v-model="queryParams.startTime"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="请选择开始时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="结束时间" prop="endTime">
        <el-date-picker clearable
                        v-model="queryParams.endTime"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="请选择结束时间">
        </el-date-picker>
      </el-form-item>

      <el-form-item style="margin-left: 20px">
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 按钮部分-->
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['module:leave:add']"
        >新增
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['module:leave:edit']"
        >修改
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['module:leave:remove']"
        >删除
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['module:leave:export']"
        >导出
        </el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
    </el-row>

    <!-- 列表部分-->
    <el-table :border="true" v-loading="loading" :data="leaveList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center"  />
      <el-table-column type="index" width="55" align="center" label="序号" />
      <el-table-column label="单号" align="center" width="140px" prop="serialNum" v-if="columns[12].visible"/>

      <el-table-column label="申请人" align="center" prop="username" v-if="columns[0].visible"/>
      <el-table-column label="姓名" align="center" prop="staffName" v-if="columns[1].visible"/>
      <el-table-column label="申请类型" align="center" prop="subscribePatternName" v-if="columns[2].visible"/>

      <el-table-column label="请假类型" align="center" prop="leaveType" v-if="columns[3].visible"/>
      <el-table-column label="原因" align="center" width="120px" prop="reason" v-if="columns[4].visible"/>
      <el-table-column label="申请日期" align="center" prop="initiateTime" width="180" v-if="columns[5].visible">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.initiateTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="天数" align="center" prop="days"   v-if="columns[6].visible"/>
      <el-table-column label="开始时间" align="center" prop="startTime" width="180" v-if="columns[11].visible">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.startTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="结束时间" align="center" prop="endTime" width="180" v-if="columns[7].visible">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.endTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="备注" align="center" width="120px" prop="remark" v-if="columns[8].visible"/>
      <el-table-column label="状态" align="center" prop="businessStatus" v-if="columns[9].visible">
        <template slot-scope="scope">
          <div v-if="scope.row.businessStatus=='completed'">已完成</div>
          <div v-if="scope.row.businessStatus=='approve'">审批中</div>
          <div v-if="scope.row.businessStatus=='reject'">驳回</div>
          <div v-if="scope.row.businessStatus=='pending'">待审批</div>
        </template>
      </el-table-column>

      <el-table-column label="审批进度"  width="120px" fixed="right"  align="center" v-if="columns[10].visible">
        <template slot-scope="scope">
          <el-button type="text" @click="openApprover(scope.row)">查看进度</el-button>
        </template>
      </el-table-column>
     <el-table-column label="撤回/再次提交"  width="120px" fixed="right"  style="">
       <template slot-scope="scope">
         <el-button type="text" style="color:red" @click="recallFn(scope.row)">撤回</el-button>
         <el-button v-if="scope.row.businessStatus==='reject' || scope.row.businessStatus==='recall'" type="text" style="color:limegreen"  @click="readdFn(scope.row)">再次提交</el-button>
       </template>

     </el-table-column>

      <el-table-column label="操作" width="120px" fixed="right" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['module:leave:edit']"
          >修改
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            style="color:red"
            @click="handleDelete(scope.row)"
            v-hasPermi="['module:leave:remove']"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页器部分-->
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改请假管理对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="60%" append-to-body @close="cancel">
      <el-form ref="form" :model="form" :rules="rules" :inline="true" label-width="180px">
        <el-form-item label="申请人" prop="username">
          <el-input :disabled=true v-model="form.username" placeholder="请输入申请人" style="width: 200px"/>
        </el-form-item>
        <el-form-item label="姓名" prop="staffName">
          <el-input style="width: 260px" v-model="form.staffName" readonly placeholder="请输入员工">
            <template slot="append">
              <el-button type="primary" @click="openImportUser2">
                选择员工
              </el-button>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="请假类型" prop="staffName">
          <el-select v-model="form.leaveType" placeholder="选择请假类型" style="width: 200px">
            <el-option v-for="item in leaveTypeOptions"
                       :key="item.dictValue"
                       :label="item.dictLabel"
                       :value="item.dictValue"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="申请日期" prop="initiateTime">
          <el-date-picker clearable
                          v-model="form.initiateTime"
                          type="date"
                          value-format="yyyy-MM-dd"
                          placeholder="请选择申请日期"
                          style="width: 200px">
          </el-date-picker>
        </el-form-item>

        <el-form-item label="开始时间" prop="startTime">
          <el-date-picker clearable
                          v-model="form.startTime"
                          type="date"
                          value-format="yyyy-MM-dd"
                          placeholder="请选择开始时间" style="width: 200px">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间" prop="endTime">
          <el-date-picker clearable
                          v-model="form.endTime"
                          type="date"
                          value-format="yyyy-MM-dd"
                          @blur="sumDays"
                          placeholder="请选择结束时间" style="width: 200px">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="天数" prop="days">
          <el-input v-model="form.days" placeholder="请输入天数" style="width: 200px"/>
        </el-form-item>
        <el-form-item label="原因" prop="reason">
          <el-input type="textarea"
                    v-model="form.reason"
                    placeholder="请输入原因"
                    maxlength="200"
                    show-word-limit
                    style="width: 200px"/>
        </el-form-item>
        <el-form-item label="是否使用流程模板" prop="typeStatus">
          <el-select v-model="form.typeStatus" placeholder="请选择"   @change="changeValue">
            <el-option

              v-for="item in ynOptions"
              :key="item.dictValue"
              :label="item.dictLabel"
              :value="item.dictValue">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input type="textarea"
                    maxlength="200"
                    show-word-limit
                    v-model="form.remark"
                    placeholder="请输入备注"
                    style="width: 200px"/>
        </el-form-item>


<!-- 固定类型-->
       <div     v-if="showApproval2">
<!--         审批人-->
         <div style="margin-left: 100px"> 审批人：</div>
        <el-steps :active="0" align-center>
          <el-step v-for="item in approvalOptions" :title="item.nickName" description="就不批"></el-step>
        </el-steps>
         <div style="margin-left: 100px">抄送人:</div>
         <div style="margin-left: 200px" >

           <el-avatar v-for="item in copyerOptions"> {{item.nickName.substr(0,1)}} </el-avatar>

         </div>
       </div>


<!--自定义-->
        <div v-if="showApproval3">
         <div style="margin-left: 30px">
           <span style="margin-right: 5px">请选择审批人</span>
           <el-select @change="changeuseroptions" v-model="value1" multiple placeholder="请选择">
             <el-option
               v-for="item in userlistoptions"
               :key="item.userId"
               :label="item.userName"
               :value="item.userId">
             </el-option>
           </el-select>
<!--           <el-input v-model="approver.userName" style="width: 300px">-->
<!--             <template slot="append">-->
<!--               <el-button type="primary"  @click="openUser(1)">-->
<!--                 选择审批人-->
<!--               </el-button>-->
<!--             </template>-->
<!--           </el-input>-->

         </div>
           <div style="margin-left: 30px;margin-top: 10px">
             <span style="margin-right: 5px">请选择抄送人</span>
             <el-input v-model="copyer.userName" style="width: 300px">
               <template slot="append">
                 <el-button type="primary"  @click="openUser(2)">
                   选择抄送人
                 </el-button>
               </template>
             </el-input>
           </div>
        </div>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <Elselect @meiye="myfn" @anme="anmefn" @chongzhi="czfn" @serch="serchfn" @dangqian="dqfn" ref="import" :list="staffList" ></Elselect>
    <!-- 进度弹框-->

    <el-dialog   title="查看进度"   :visible.sync="showApprove" width="60%" append-to-body @close="close">

       <el-steps :active="active" align-center>
         <el-step v-for="item in approvalOptions" :title="item.approverName" :description="item.remark?item.remark:item.deferredRemark"></el-step>
       </el-steps>
      <div style="margin-left: 200px">
        <div v-for="item in copyerOptions" style="position: relative;width: 60px ;display: inline-block">
          <el-avatar style="color: #FFFFFF;background-color: cornflowerblue;"> {{item.copyerName}} </el-avatar>
          <i v-if="item.copyerStatus==='1'" class="el-icon-success"  style="position: absolute;right: 15px;top: 1px;color: limegreen"></i>
        </div>

      </div>
       <div v-if="butonShow" style="width: 500px;margin-left: 270px;margin-top: 50px" >
         <el-button style="display: inline-block"  icon="el-icon-check" type="success" sizi="mini" @click="textShow=true">通过</el-button>
         <el-button style="display: inline-block"  icon="el-icon-close" type="danger" sizi="mini" @click="textNOShow=true">驳回</el-button>
         <el-button style="display: inline-block"  icon="el-icon-loading" type="warning" sizi="mini" @click="deferredShow=true">延迟处理</el-button>

       </div>
     </el-dialog>
    <!--    审批意见框-->
    <el-dialog title="审批意见" :visible.sync="textShow" width="60%" append-to-body  >
      <el-input style="width: 80%;height: 200px" type="textarea" placeholder="请填写审批意见" v-model="textArea"></el-input>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="approvalFn">确 定</el-button>
        <el-button @click="textClear">取 消</el-button>
      </div>
    </el-dialog>
    <!--  驳回-->
    <el-dialog title="驳回原因" :visible.sync="textNOShow" width="60%" append-to-body>
      <el-input style="width: 80%;height: 200px" type="textarea" placeholder="请填写审批意见" v-model="textArea"></el-input>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="approvalNoFn">确 定</el-button>
        <el-button @click="textClear">取 消</el-button>
      </div>
    </el-dialog>
<!--    延时处理-->
    <el-dialog title="延迟原因" :visible.sync="deferredShow" width="60%" append-to-body>
      <el-input style="width: 80%;height: 200px" type="textarea" placeholder="延迟原因" v-model="deferredRemark"></el-input>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="deferredNoFn">确 定</el-button>
        <el-button @click="deferredClear">取 消</el-button>
      </div>
    </el-dialog>
    <import-user ref="user" @showUser="showUser"></import-user>

  </div>
</template>

<script>
import {listLeave, getLeave, delLeave, addLeave, updateLeave} from "@/api/module/leave";
import {getDicts} from '@/api/system/dict/data'
import {listStaff} from "@/api/module/staff";
import Elselect from "@/components/ELselect/Elselect";
import {listType} from '@/api/module/type';
import {getUserProfile,getuserList,getuserrank} from '@/api/system/user';
import importUser from '@/views/dialog/user.vue';
import { listRecord, getRecord, delRecord, addRecord, updateRecord } from "@/api/module/record";
import { listSubscribepattern, getSubscribepattern, delSubscribepattern, addSubscribepattern, updateSubscribepattern } from "@/api/module/subscribepattern";
import {listCopy} from "@/api/module/copy";

export default {
  name: "Leave",
  components:{
    Elselect,importUser
  },
  data() {
    return {

      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 请假管理表格数据
      leaveList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        userId:null,
        username: null,
        staffId: null,
        staffName: null,
        leaveType: null,
        reason: null,
        initiateTime: null,
        days: null,
        startTime: null,
        endTime: null,
        status: null,
        tenantId: null
      },
      // 列信息
      columns: [
        { key: 0, label: `申请人`, visible: true },
        { key: 1, label: `姓名`, visible: true },
        { key: 2, label: `申请类型`, visible: true },
        { key: 3, label: `请假类型`, visible: true },
        { key: 4, label: `原因`, visible: true },
        { key: 5, label: `申请日期`, visible: true },
        { key: 6, label: `天数`, visible: true },
        { key: 7, label: `结束时间`, visible: true },
        { key: 8, label: `备注`, visible: true },
        { key: 9, label: `状态`, visible: true },
        { key: 10, label: `审批进度`, visible: true },
        { key: 11, label: `开始时间`, visible: true },
        { key: 12, label: `单号`, visible: true },

      ],
      // 表单参数
      form: {},
      success:"background-color:red",
      unKnow:"background-color:blue",
      // 表单校验
      rules: {
        username: [{required: true, message: '请输申请人', trigger: 'blur'},],
        staffId: [{required: true, message: '请输入员工id', trigger: 'blur'},],
        staffName: [{required: true, message: '请输入姓名', trigger: 'blur'},],
        initiateTime: [{required: true, message: '请选择申请日期', trigger: 'change'},],
        startTime: [{required: true, message: '请选择开始日期', trigger: 'change'},],
        endTime: [{required: true, message: '请选择结束时间', trigger: 'change'},],
        delFlag: [{required: true, message: '请输入删除标识', trigger: 'blur'},],
        reason: [{required: true, message: '请输入请假类型', trigger: 'blur'},],
        tenantId: [{required: true, message: '请输入所属租户', trigger: 'blur'},],
      },
      leaveTypeOptions: [],//请假类型数组
      staffList:[],// 名字组件传参
      ynOptions:[],//是否
      approvalOptions:[],
      copyerOptions:[],
      showApprove:false,
      showApproval2:false,
      showApproval3:false,
      approver:{},//自定义审批人
      copyer:{},//自定义抄送人
      listItem:{},//保存当前点击数据
      textShow:false,//意见弹框
      textNOShow:false,
      textArea:'',
      active:0,//进度条
      butonShow:false,
      deferredRemark:'',
      deferredShow:false,
      value1:[],
      userlistoptions:[]
    };
  },
  created() {
    this.getLeaveType();
    this.getList();

    this.getYesNo()
    this.getrankuser()

  },
  methods: {
   // 查询主管级别用户
    getrankuser(){
      getuserrank({rank:"主管",pageSize:1000}).then(res=>{
         this.userlistoptions=res.rows
      })
    },
    changeuseroptions(val){
      this.form.approverName=null
      val.forEach(ids=>{
      this.userlistoptions.forEach(item=>{
        if(ids==item.userId){
         if(this.form.approverName==null){
           this.form.approverName=item.userName
         }else {
           this.form.approverName= this.form.approverName+','+item.userName
         }
        }
      })
      })
    },
   // 延迟处理
   async  deferredNoFn(){
      await updateRecord({
        typeOperation: "deferred",
        serialNum :this.listItem.serialNum,
        deferredRemark:this.deferredRemark,
      })
     this.deferredShow=false
     this.$message.success('操作成功')
     this.butonShow=false
     await  this.openApprover()

    },

    deferredClear(){
       this.deferredShow=false
      this.deferredRemark=''
    },
    close(){
     this.butonShow=false
    },
    //撤回
    async recallFn(val){
      await updateRecord({
        typeOperation: "recall",
        serialNum :val.serialNum,
      })
     this.$message.success('撤回成功，可在修改后再次提交')
     await this.getList();
    },

    //1.获取请假类型
    getLeaveType() {
      getDicts('leave_type').then(res => {
        // console.log(res)
        this.leaveTypeOptions = res.data
      })
    },
    //是或否
    getYesNo(){
      getDicts('yesorno').then(res=>{
        this.ynOptions=res.data
      })
    },

    fousfn(val){
      this.form.staffName=val
    },

    /** 查询请假管理列表 */
    getList() {
      this.loading = true;
      this.queryParams.userId=this.$store.getters.id;
      listLeave(this.queryParams).then(response => {
        this.leaveList = response.rows;

        //请假类型的处理
        let arr = this.leaveList
        arr.forEach(item => {
          item.leaveType = this.getValue(this.leaveTypeOptions, item.leaveType)
        })
        this.leaveList = arr

        this.total = response.total;
        this.loading = false;
      });
    },
    //回显处理
    getValue(arr, item) {
      for (let i = 0; i < arr.length; i++) {
        if (item === arr[i].dictValue) {
          return arr[i].dictLabel
        }
      }
    },

    // 取消按钮
    cancel() {
      this.open = false;
      this.approver={}
      this.copyer={}
      this.approvalOptions=[]
      this.copyerOptions=[]
      this.showApprove=false,
        this.showApproval2=false,
        this.showApproval3=false,

      this.reset();
    },
    // 表单重置
    reset() {
      this.queryParams={}
      this.value1 = []
      this.copyer = {}
      this.form = {
        id: null,
        username: null,//申请人
        staffId: null,//员工id
        staffName: null,//姓名
        leaveType: null,//请假类型,事假，病假，调休
        reason: null,//原因
        initiateTime: null,//申请日期
        days: null,//天数
        startTime: null,//开始时间
        endTime: null,//结束时间
        remark: null,//备注
        status: null,//状态
        createTime: null,
        updateTime: null,
        delFlag: null,//删除标识
        typeStatus:'0',
        tenantId: null//所属租户
      },


      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    //根据对应审批，获取相应的申请类型————————————————————————————------------
    async getapproverTpye(){
      let res =await getSubscribepattern(1)
      this.form.subscribePatternName=res.data.patternName
      this.form.subscribePatternId=res.data.id
    },
    /** 新增按钮操作 */
   async handleAdd() {
      this.reset();

      this.form.delFlag = 0//0代表存在 2代表删除
      this.form.username = this.$store.getters.name
      this.form.userId=this.$store.getters.id
      this.form.staffName=this.$store.getters.staffName
      this.form.staffId=this.$store.getters.staffId
      // await this.getapproverTpye()
      const res = await listStaff(this.queryParams)
      this.staffList=res.rows

      this.open = true;
      this.title = "添加请假管理";

    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids
      getLeave(id).then(response => {
        this.form = response.data;
        if (this.form.typeStatus == '1'){
          this.showApproval3=true;
          let array=this.form.approver.split(',')
          array.forEach(item=>{
           this.value1.push(Number(item))
          })
          this.copyer.userName=this.form.copyerName
        }
        this.open = true;
        this.title = "修改请假管理";
      });
    },
    //计算天数
    sumDays(){
      this.form.days=this.getDayBetween(this.formatDate(this.form.startTime),this.formatDate(this.form.endTime))
    },
    //格式转换
    formatDate (d) {
      var date = new Date(d);
      var YY = date.getFullYear() + '-';
      var MM =
        (date.getMonth() + 1 < 10
          ? '0' + (date.getMonth() + 1)
          : date.getMonth() + 1) + '-';
      var DD = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();

      return YY + MM + DD
    },
    getDayBetween(start,end){
      var startDate=Date.parse(start)
      var endDate=Date.parse(end)
      if(startDate>endDate){
        return this.$message('请重新确认日期')
      }
      if(startDate==endDate){
        return 1
      }
      var days=(endDate-startDate)/(1*24*60*60*1000)
      return days
    },
    //流程----------------------------------------------------------------
    async changeValue(val){
      console.log(val)
      if(val=='0'){
        //进度条展示
        this.showApproval3=false
        this.showApproval2=false
        this.value1 = []
        this.copyer = {}
      }else {
      //  自定义类型
        this.showApproval2=false
        this.showApproval3=true
      }
    },
    //打开用户
    openUser(val){
      this.$refs.user.show(val,1)
    },
    showUser(data){
      console.log(data)
      if(data.type=='1'){
        this.approver=data

        //自定义类型赋值
        this.form.approver=data.userId
        this.form.approverName=data.userName
      }
      if(data.type=='2'){
        this.copyer=data
        this.form.copyerId=data.userId
        this.form.copyerName=data.userName
      }


    },
    readdFn(val){
      this.open=true
      this.form=val
      if(val.businessStatus==="recall" || val.businessStatus==="reject"){
        this.title="重新填写信息"
      }
    },
    /** 提交按钮 */
    submitForm() {
      this.form.approver=this.value1.join(',')
      this.$refs["form"].validate(valid => {
        if (valid) {
          //主动撤回，重新提交
          if(this.form.id && this.form.businessStatus==='recall'){

            addLeave(this.form).then(response => {
              this.$modal.msgSuccess("重新提交成功");
              this.open = false;
              this.getList();
            });//驳回提交
          }else if(this.form.id && this.form.businessStatus==='reject'){
            this.form.serialNum=''
            addLeave(this.form).then(response => {
              this.$modal.msgSuccess("重新提交成功");
              this.open = false;
              this.getList();
            });//修改提交
          }else if(this.form.id){
            updateLeave(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });//新增提交
          }else{
            addLeave(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }

        }

      })
    },
    //-------------------------------------------------------------------------
    async openApprover(val){
      this.showApprove=true
    //保存当前数据
      this.listItem=val
      this.active=parseFloat(this.listItem.status)
    // 查询审批记录
      let res=await listRecord({serialNum:val.serialNum})
      var arr=res.rows


      for(var i=0;i<arr.length;i++){
        for(var j=i+1;j<arr.length;j++){
          //如果第一个比第二个大，就交换他们两个位置
          if( arr[i].sequence>arr[j].sequence){
            var temp = arr[i];
            arr[i] = arr[j];
            arr[j] = temp;
          }
        }
      }
      arr.forEach(item=>{
        if(item.approvalStatus=='completed'){
          this.active++
        }
      })
    this.approvalOptions=arr
//判断按钮是否显示
      this.approvalOptions.forEach(item=>{
        if(item.approvalStatus=='approve'){

          if(this.$store.getters.id===item.approverId){

            this.butonShow=true
          }
        }
      })
      //  查询抄送详情
      let res2=await listCopy({serialNum:val.serialNum})
      this.copyerOptions=res2.rows

    },

    //审批判断
   async approvalFn(){
     await updateRecord({
       typeOperation: "agree",
       serialNum :this.listItem.serialNum,
       remark:this.textArea,
     })
     //审批意见框关闭
     this.textShow=false
     await this.$message.success('审批成功')
     this.butonShow=false
     await  this.openApprover()


    },
    //审批意见框关闭事件
    textClear(){
      this.textArea=''
      this.textShow=false
      this.textNOShow=false
    },
   async approvalNoFn(){
      await updateRecord({
        typeOperation: "rejected",
        serialNum :this.listItem.serialNum,
        remark:this.textArea,
      })
      //审批意见框关闭
      this.textNOShow=false
      await this.$message.success('驳回成功')
     this.butonShow=false
     await  this.openApprover()
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal.confirm('是否确认删除请假管理编号为"' + ids + '"的数据项？').then(function () {
        return delLeave(ids);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {
      });
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('module/leave/export', {
        ...this.queryParams
      }, `leave_${new Date().getTime()}.xlsx`)
    },
    //组件
    openImportUser2() {
      this.$refs.import.show();
    },
    async myfn(val){
      console.log(val)
      this.queryParams.pageSize=val
      const res = await listStaff(this.queryParams)
      // console.log(res.rows)
      this.staffList=res.rows
    },
    async dqfn(val){
      this.queryParams.pageNum=val
      const res = await listStaff(this.queryParams)
      // console.log(res.rows)
      this.staffList=res.rows
    },
    //组件搜索功能
    async serchfn(val){
      this.queryParams.name=val
      const res = await listStaff(this.queryParams)
      this.staffList=res.rows
    },
    //组件重置功能
    async czfn(){
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        username: null,
        trainingItems: null,
        sponsor: null,
        sponsorDept: null,
        participant: null,
        participantDept: null,
        initiateTime: null,
        startTime: null,
        endTime: null,
        days: null,
        status: null,
        tenantId: null,
        staffId: null,
        staffName: null,
      }
      const res = await listStaff(this.queryParams)
      this.staffList=res.rows
      this.listDatafn()
    },
    anmefn(val){
      this.form.staffName=val.name
      this.form.staffId=val.id
      this.$refs.import.visible=false
    }
  }
};
</script>
<style lang="scss">
   .success{
     background-color: green;
   }
   .unKnown{
     background-color: #cccccc;
   }
</style>
